<!DOCTYPE html>
<html lang="en">

<head>
    <base target="_self">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache,must-ridate">
    <link rel="icon" href="login/img/favicon.ico" type="image/x-icon"/>
    <meta http-equiv="expires" content="0">
    <title>
        知乎后台管理系统
    </title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="http://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
    </style>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js">
    </script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js">
    </script>
    <script type="text/javascript">
    </script>
</head>

<body>
<div class="header">
    <h4>知乎后台管理系统</h4>
</div>
<div class="content">

    <!-- tab标签 -->
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#user" data-toggle="tab">
                用户
            </a>
        </li>
        <li>
            <a href="#question" data-toggle="tab">
                问题
            </a>
        </li>
        <li>
            <a href="#answer" data-toggle="tab">
                文章
            </a>
        </li>
    </ul>
    <!-- 每个tab页对应的内容 -->
    <div id="myTabContent" class="tab-content">


        <div class="tab-pane fade in active" id="user">
            <div style="margin-top: 20px;width: 200px">
                <input type="text" class="form-control" value="" placeholder="输入用户名称" v-model="search1">
            </div>

            <p>
            <table class="table table-striped table-bordered table-hover  table-condensed">
                <thead>
                <th>用户id</th>
                <th>用户</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>状态</th>

                </thead>
                <tbody v-for="(user,index) in items1" :key="index" v-model="users[index]">
                <tr>
                    <td>{{user.id}}</td>
                    <td>{{user.username}}</td>
                    <td>{{user.telnum}}</td>
                    <td>{{user.email}}</td>
                    <td>
                        <button v-if="!user.show1"
                                style="padding: 0 10px;width: 110px;height: 32px;color: #0084ff;
                                        background: rgba(0,132,255,.1);font-size: 14px;line-height: 32px;border-radius: 3px;border-color: transparent;
                                        outline: none;-webkit-appearance: none;font: inherit;"
                                @click="onagree(index)">
                            <!--                            <svg class="Zi Zi&#45;&#45;TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10" height="10"><path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z" fill-rule="evenodd"></path></svg>️-->
                            <svg class="Zi Zi&#45;&#45;TriangleDown" fill="currentColor" viewBox="0 0 24 24" width="10"
                                 height="10">
                                <path d="M20.044 3H3.956C2.876 3 2 3.517 2 4.9c0 .326.087.533.236.896L10.216 19c.355.571.87 1.143 1.784 1.143s1.429-.572 1.784-1.143l7.98-13.204c.149-.363.236-.57.236-.896 0-1.386-.876-1.9-1.956-1.9z"
                                      fill-rule="evenodd"></path>
                            </svg>
                            正常
                        </button>
                        <button v-if="user.show1"
                                style="padding: 0 10px;width: 110px;height: 32px;color: #0084ff;
                                         background: rgba(0,132,255,.1);font-size: 14px;line-height: 32px;border-radius: 3px;border-color: transparent;
                                         color: #fff;
                                        background: #0084ff;
                                         outline: none;-webkit-appearance: none;font: inherit;"
                                @click="onagree(index)">
                            <!--                            <svg class="Zi Zi&#45;&#45;TriangleDown" fill="currentColor" viewBox="0 0 24 24" width="10" height="10"><path d="M20.044 3H3.956C2.876 3 2 3.517 2 4.9c0 .326.087.533.236.896L10.216 19c.355.571.87 1.143 1.784 1.143s1.429-.572 1.784-1.143l7.98-13.204c.149-.363.236-.57.236-.896 0-1.386-.876-1.9-1.956-1.9z" fill-rule="evenodd"></path></svg>-->
                            <svg class="Zi Zi&#45;&#45;TriangleUp VoteButton-TriangleUp" fill="currentColor"
                                 viewBox="0 0 24 24" width="10" height="10">
                                <path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z"
                                      fill-rule="evenodd"></path>
                            </svg>
                            ️
                            正常
                        </button>
                        <button v-if="user.show1"
                                style="padding: 0 10px;width: 110px;height: 32px;color: #0084ff;
                                        background: rgba(0,132,255,.1);font-size: 14px;line-height: 32px;border-radius: 3px;border-color: transparent;
                                        outline: none;-webkit-appearance: none;font: inherit;"
                                @click="onagree(index)">
                            <svg class="Zi Zi--TriangleDown" fill="currentColor" viewBox="0 0 24 24" width="10"
                                 height="10">
                                <path d="M20.044 3H3.956C2.876 3 2 3.517 2 4.9c0 .326.087.533.236.896L10.216 19c.355.571.87 1.143 1.784 1.143s1.429-.572 1.784-1.143l7.98-13.204c.149-.363.236-.57.236-.896 0-1.386-.876-1.9-1.956-1.9z"
                                      fill-rule="evenodd"></path>
                            </svg>

                            <!--                            <svg class="Zi Zi&#45;&#45;TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10" height="10"><path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z" fill-rule="evenodd"></path></svg>️-->
                            停用
                        </button>
                        <button v-if="!user.show1"
                                style="padding: 0 10px;width: 110px;height: 32px;color: #0084ff;
                                         background: rgba(0,132,255,.1);font-size: 14px;line-height: 32px;border-radius: 3px;border-color: transparent;
                                         color: #fff;
                                        background: #0084ff;
                                         outline: none;-webkit-appearance: none;font: inherit;"
                                @click="onagree(index)">
                            <!--                            <svg class="Zi Zi&#45;&#45;TriangleDown" fill="currentColor" viewBox="0 0 24 24" width="10" height="10"><path d="M20.044 3H3.956C2.876 3 2 3.517 2 4.9c0 .326.087.533.236.896L10.216 19c.355.571.87 1.143 1.784 1.143s1.429-.572 1.784-1.143l7.98-13.204c.149-.363.236-.57.236-.896 0-1.386-.876-1.9-1.956-1.9z" fill-rule="evenodd"></path></svg>-->
                            <svg class="Zi Zi&#45;&#45;TriangleUp VoteButton-TriangleUp" fill="currentColor"
                                 viewBox="0 0 24 24" width="10" height="10">
                                <path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z"
                                      fill-rule="evenodd"></path>
                            </svg>
                            停用
                        </button>

                        <button data-toggle="modal" data-target="#myModal1"
                                style="float: right;padding: 0 10px;width: 110px;height: 32px;color: #0084ff;
                                         background: rgba(0,132,255,.1);font-size: 14px;line-height: 32px;border-radius: 3px;border-color: transparent;
                                         color: #fff;
                                        background: #babbbf;
                                         outline: none;-webkit-appearance: none;font: inherit;"
                                @click="rePassword(user.email)">
                            <!--                            <svg class="Zi Zi&#45;&#45;TriangleDown" fill="currentColor" viewBox="0 0 24 24" width="10" height="10"><path d="M20.044 3H3.956C2.876 3 2 3.517 2 4.9c0 .326.087.533.236.896L10.216 19c.355.571.87 1.143 1.784 1.143s1.429-.572 1.784-1.143l7.98-13.204c.149-.363.236-.57.236-.896 0-1.386-.876-1.9-1.956-1.9z" fill-rule="evenodd"></path></svg>-->
                            <svg class="Zi Zi&#45;&#45;TriangleUp VoteButton-TriangleUp" fill="currentColor"
                                 viewBox="0 0 24 24" width="10" height="10">
                                <path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z"
                                      fill-rule="evenodd"></path>
                            </svg>
                            ️
                            重置密码
                        </button>
                    </td>

                </tr>

                </tbody>
                <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel1">重置密码</h4>
                            </div>
                            <div class="modal-body" id="resetPassword" >
                                <h4 id="rePassword">重置密码为:&nbsp;admin123</h4>
                                <h4 id="model_text">已发送至邮箱:<span style="color: #666;line-height: 18px" id="sendEmail"></span></h4>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <!--                                <button type="button" @click="submitPassword()" class="btn btn-primary">提交更改</button>-->
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
            </table>
            </p>
        </div>
        <div class="tab-pane fade" id="question">
            <div style="margin-top: 20px;width: 200px">
                <input type="text" class="form-control" value="" placeholder="输入问题名称" v-model="search2">
            </div>

            <p>
            <table class="table table-striped table-bordered table-hover  table-condensed">
                <thead>
                <th>问题id</th>
                <th>问题名称</th>
                <th>发起人</th>
                <th>提问时间</th>
                <th>浏览次数</th>
                <th>操作</th>
                </thead>
                <tbody v-for="(question,index2) in items2" :key="index2" v-model="question[index2]">
                <tr>
                    <td>{{question.id}}</td>
                    <td>{{question.questionname}}</td>
                    <td>{{question.username}}</td>
                    <td>{{question.createtime}}</td>
                    <td>{{question.skimtimes}}</td>
                    <td>
                        <button id="deleteQuestion" class="btn btn-primary"
                                @click="deleteQuestion(question.id,index2)">删除
                        </button>
                    </td>
                </tr>

                </tbody>
            </table>
            </p>
        </div>
        <div class="tab-pane fade" id="answer">
            <div style="margin-top: 20px;width: 200px">
                <input type="text" class="form-control" value="" placeholder="输入文章名称" v-model="search3">
            </div>

            <p>
            <table class="table table-striped table-bordered table-hover  table-condensed">
                <thead>
                <th>文章id</th>
                <th>title</th>
                <th>作者</th>
                <th>发表时间</th>
                <th>操作</th>
                </thead>
                <tbody v-for="(article,index3) in items3" :key="index3" v-model="article[index3]">
                <tr>
                    <td>{{article.id}}</td>
                    <td>{{article.articlename}}</td>
                    <td>{{article.authorname}}</td>
                    <td>{{article.createtime}}</td>
                    <td>
                        <button id="article" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
                                @click="showArticle(index3)">显示全文
                        </button>
                        <button id="deleteArticle" class="btn btn-primary"
                                @click="deleteArticle(article.id,index3)">删除
                        </button>
                    </td>

                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">文章内容</h4>
                                </div>
                                <div class="modal-body" id="articleshow" escape="false"></div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <!--                                    <button type="button" class="btn btn-primary">提交更改</button>-->
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>

                    <!--                    <td>-->
                    <!--                            <button type="button" class="btn btn-default" title="Popover title"-->
                    <!--                                    data-container="body" data-toggle="popover" data-placement="left"-->
                    <!--                                    data-content="左侧的 Popover 中的一些内容">-->
                    <!--                                左侧的 Popover-->
                    <!--                            </button>-->
                    <!--                    </td>-->
                </tr>

                </tbody>
            </table>
            </p>
        </div>

    </div>
    <div class="footer">

    </div>

</div>

</body>
<style>
    th {
        line-height: 20px;
        color: #666;
        height: 40px;
    }

    tr {
        height: 40px;
    }

    .header {
        text-align: center;
        float: left;
        height: 46px;
        width: 100%;
        /*background-color: #0767c8;*/
        background: linear-gradient(to bottom, #086ed5, #055db5);
        /*background: #cd0200;*/
        margin-bottom: 10px;
        position: fixed;
        border-bottom: 1px solid #044e97;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .15);
        color: white;
    }

    .content {
        padding-left: 100px;
        padding-right: 100px;
        margin-top: 100px;
        float: left;
        height: 1000px;
        width: 100%;

    }
</style>
<script>


    function checkPassword(){

        var password = document.getElementById("inputPassword").value;
        var password1 = document.getElementById("inputPassword2").value;

        if(!password===password1){
            $("#passwordcheck").html("<font color='red'>两次密码输入不一致</font>");
        }
        else{
            $("#passwordcheck").html("<font color='red'> </font>");
        }
    }

    function rePassword(email){
        $("#sendEmail").text(email);
    }

    new Vue({
        el: '#myTabContent',
        data: {
            swi: "true",
            search1: "",
            search2: "",
            search3: "",
            users: [],
            questions: [],
            articles: []
        },
        created: function () {
            self = this;
            fetch("http://localhost:8080/getUser").then(function (response) {
                response.json().then(function (jsonObject) {
                    self.users = jsonObject
                })
            }).catch(function (err) {
                console.log("Fetch错误:" + err);
            });
            fetch("http://localhost:8080/getQuestion").then(function (response) {
                response.json().then(function (jsonObject) {
                    self.questions = jsonObject
                })
            }).catch(function (err) {
                console.log("Fetch错误:" + err);
            });
            fetch("http://localhost:8080/getArticle").then(function (response) {
                response.json().then(function (jsonObject) {
                    self.articles = jsonObject
                })
            }).catch(function (err) {
                console.log("Fetch错误:" + err);
            });

        },
        computed: {
            //过滤方法
            items1: function () {
                var _search1 = this.search1;
                if (_search1) {
                    //不区分大小写处理
                    var reg1 = new RegExp(_search1, 'ig')
                    //es6 filter过滤匹配，有则返回当前，无则返回所有
                    return (this.users.data).filter(function (e) {
                        // //匹配所有字段
                        // return Object.keys(e).some(function (key) {
                        //     return e[key].match(reg);
                        // })
                        // 匹配某个字段
                        return e.username.match(reg1);
                    })
                }
                return this.users.data;
            },
            items2: function () {
                var _search2 = this.search2;
                if (_search2) {
                    //不区分大小写处理
                    var reg2 = new RegExp(_search2, 'ig')
                    //es6 filter过滤匹配，有则返回当前，无则返回所有
                    return this.questions.data.filter(function (e) {
                        // //匹配所有字段
                        // return Object.keys(e).some(function (key) {
                        //     return e[key].match(reg);
                        // })
                        // 匹配某个字段
                        return e.questionname.match(reg2);
                    })
                }
                return this.questions.data;
            },
            items3: function () {
                var _search3 = this.search3;
                if (_search3) {
                    //不区分大小写处理
                    var reg3 = new RegExp(_search3, 'ig')
                    //es6 filter过滤匹配，有则返回当前，无则返回所有
                    return this.articles.data.filter(function (e) {
                        // //匹配所有字段
                        // return Object.keys(e).some(function (key) {
                        //     return e[key].match(reg);
                        // })
                        // 匹配某个字段
                        return e.articlename.match(reg3);
                    })
                }
                return this.articles.data;
            }

        },
        methods: {
            onagree: function (index) {
                if (this.users.data[index].show1) {
                    fetch("http://localhost:8080/setUserStatus?kind=0&userid=" + this.users.data[index].id);
                    this.users.data[index].show1 = !this.users.data[index].show1;
                } else {
                    fetch("http://localhost:8080/setUserStatus?kind=1&userid=" + this.users.data[index].id);
                    this.users.data[index].show1 = !this.users.data[index].show1;
                }


            },
            ondisagree: function (index) {
                if (!this.users.data[index].show1) {
                    fetch("http://localhost:8080/setUserStatus?kind=1&userid=" + this.users.data[index].id);
                    this.users.data[index].show1 = !this.users.data[index].show1;
                } else {
                    fetch("http://localhost:8080/setUserStatus?kind=0&userid=" + this.users.data[index].id);
                    this.users.data[index].show1 = !this.users.data[index].show1;
                }
            },
            showArticle: function (index) {
                var divshow = $("#articleshow");
                divshow.append(this.articles.data[index].articletext);
            },
            deleteQuestion:function (id,index) {
                fetch("http://localhost:8080/deleteQuestionByAdmin?id="+id);
                this.questions.data.splice(index,1);
            },
            deleteArticle:function (id,index) {
                fetch("http://localhost:8080/deleteArticleByAdmin?id="+id);
                this.articles.data.splice(index,1);
            }
        }
    })
</script>
</html>